<template>
  <a-collapse-item
    :key="`directory-${file.id}`"
    :header="'项目文件夹/' + file.name"
    style="background: var(--color-neutral-2)"
  >
    <template #expand-icon="{ active }">
      <icon-caret-up v-if="active" />
      <icon-caret-down v-else />
    </template>
    <template #extra>
      <a-tag size="small">{{ getCounts(file) }} 个文件</a-tag>
    </template>
    <template v-if="file?.children?.length">
      <template v-for="item in file.children" :key="`${item.id}-${file.id}`">
        <a-collapse
          v-if="item.isFileOrFolder === 0 && item?.children?.length"
          expand-icon-position="right"
          :show-expand-icon="true"
          style="margin-top: 4px"
        >
          <FileCollapseItem :file="item"></FileCollapseItem>
        </a-collapse>
        <div v-if="item.isFileOrFolder === 1" class="file-item">
          <img
            src="@/assets/images/login-bg.png"
            alt=""
            style="
              width: 40px;
              height: 40px;
              border-radius: 4px;
              margin-top: 6px;
            "
          />
          <div class="file-text">
            <div class="file-name">{{ item.name }}</div>
            <span class="file-version">{{ item.version }}</span>
          </div>
          <span class="icon-delete" @click="delFile(item)"
            ><icon-delete size="18"
          /></span>
        </div>
      </template>
    </template>
  </a-collapse-item>
</template>

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';
  import { getDirectoryFileCounts } from '../../api';

  const props = defineProps({
    file: {
      type: Object,
      default() {
        return {};
      },
    },
  });
  const delFile = (file: any) => {
    console.log('del file: ', file);
  };

  const getCounts = (file: any) => {
    return getDirectoryFileCounts(file);
  };
</script>

<style scoped lang="less">
  ::v-deep .arco-collapse-item-header {
    background-color: var(--color-neutral-2);
  }
  .file-item {
    margin-top: 4px;
    height: 56px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    .file-text {
      float: right;
      width: calc(100% - 75px);
      //border: 1px solid red;
      margin-right: 20px;
      margin-top: 2px;
      .file-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 22px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN, serif;
        font-weight: 400;
        color: var(--color-text-1);
        line-height: 22px;
      }
      .file-version {
        //height: 20px;
        background: #e8fffb;
        border-radius: 4px;
        opacity: 1;
        border: 1px solid #0fc6c2;
        //padding: 4px;
        padding-left: 6px;
        padding-right: 6px;
        color: #0fc6c2;
        font-size: 12px;
        margin-top: 4px;
        line-height: 20px;
      }
    }
    .icon-delete {
      position: absolute;
      right: 0;
      top: 18px;
      cursor: pointer;
    }
  }
</style>
